<template>
  <div>
    <!-- 富文本编辑器 -->
    <quill-editor
      v-model="content"
      ref="myQuillEditor"
      :options="editorOption"
      @blur="onEditorBlur($event)"
      @focus="onEditorFocus($event)"
      @change="onEditorChange($event)"
    ></quill-editor>
  </div>
</template>

<script>
import { quillEditor } from 'vue-quill-editor'
export default {
  props: {
    data: {
      type: String,
      require: true
    }
  },
  name: 'quill',
  model: {
    prop: 'FormData.question',
    event: 'input'
  },
  data () {
    return {
      content: '',
      editorOption: {
        modules: {
          toolbar: [
            ['bold', 'italic', 'underline', 'strike'], // 加粗 斜体 下划线 删除线
            ['blockquote'], // 引用  代码块
            ['blockquote', 'code-block'], // 引用  代码块
            // [{ header: 1 }, { header: 2 }], // 1、2 级标题
            [{ list: 'ordered' }, { list: 'bullet' }], // 有序、无序列表
            // [{ script: 'sub' }, { script: 'super' }], // 上标/下标
            // [{ indent: '-1' }, { indent: '+1' }], // 缩进
            // [{'direction': 'rtl'}],                         // 文本方向
            // [{ size: ['small', false, 'large', 'huge'] }], // 字体大小
            // [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
            // [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
            // [{ font: [] }], // 字体种类
            // [{ align: [] }], // 对齐方式
            // ['clean'], // 清除文本格式
            ['link', 'image', 'video'] // 链接、图片、视频
          ] // 工具菜单栏配置
        },
        placeholder: '', // 提示
        readyOnly: false, // 是否只读
        theme: 'snow', // 主题
        syntax: true // 语法检测
      }
    }
  },
  created () {
    this.content = this.data
  },
  methods: {
    // 失去焦点
    onEditorBlur (editor) {
    },
    // 获得焦点
    onEditorFocus (editor) { this.content = this.data },
    // 开始
    onEditorReady (editor) { },
    // 值发生变化
    onEditorChange ({ quill, html, text }) {
      // console.log('editor change!', quill, html, text)
      this.content = html
      this.$emit('input', this.content)
    }
  },

  components: { quillEditor },

  computed: {
    editor () {
      return this.$refs.myQuillEditor.quill
    }
  }
}
</script>
<style  scoped lang='scss'>
::v-deep .el-tabs__item.is-active {
  color: black;
  font-size: 16px;
  padding-bottom: 50px;
}
::v-deep .ql-editor {
  height: 200px;
}
</style>
